<template>
  <div>
    <!-- websocket原生
       1：实例化
          const ws=new WebSocket('ws://zllhyy.cn:4430')
       2:监听
          是否连接
          ws.addEventListener('open',()=>{连接了})
          接收消息
          ws.addEventListener('message',(e)=>{e.data接收到的消息})
          发送消息
          ws.send('消息内容')
          关闭连接
          ws.close()
          插件使用
          1：下载插件
          yarn add  socket.io-client
          2:导入  import {io} from 'socket.io-client'
          3:实例化
               const ws=io('地址',{配制})
           4:监听
              ws.on('connect',()=>{
                连接了
              }) 
              接收消息
             ws.on('message/自定义',(e)=>{
              e:消息内容
             }) 
             发送消息
             ws.emit('message/自定义',消息内容)
             // 关闭
             ws.on('disconnect',()=>{关闭})
             ws.close()
     -->
    <van-field v-model="msg">
      <template #button>
        <div @click="sendClick">
          发送
        </div>
      </template>
    </van-field>
    <button @click="closeEvent">关闭连接</button>
  </div>
</template>
<script>
import { io } from 'socket.io-client'
export default {
  data () {
    return {
      ws: '',
      msg: ''
    }
  },
  created () {
    this.ws = io('http://toutiao.itheima.net', {
      query: {
        token: this.$store.state.token.token
      },
      transports: ['websocket']
    })
    this.ws.on('connect', () => {
      console.log('连接成功!!!')
    })
    this.ws.on('message', e => {
      console.log('服务器返回消息内容：', e)
    })
    this.ws.on('disconnect', () => {
      console.log('关闭连接')
    })
  },
  methods: {
    sendClick () {
      this.ws.emit('message', {
        msg: this.msg
      })
    },
    closeEvent () {
      this.ws.close()
    }
  }
}
</script>
<style></style>
